<template>
  <div>
    <common-head/>
    home页
    <h1>我是home页</h1>
    <button @click="add">+</button>
    <button @click="addNumAsync">异步的+</button>
    {{ $store.state.num }}
    <button @click="reduceNum">-</button>
  </div>
</template>

<script>
import CommonHead from 'components/CommonHead'
export default {
  methods: {
    add () {
      this.$store.commit('addNum', 5)
    },
    reduceNum () {
      this.$store.commit('reduceNum', 3)
    },
    addNumAsync () {
      this.$store.dispatch('addNumAsync', 100)
    }
  },
  components: {
    CommonHead
  },
  mounted () {
    console.log(this.$store)
  }
}
</script>
<style lang="scss" scoped>
/deep/ h1{
  color:blue;
}
</style>
